import React, {useState,useEffect} from 'react';

import { Table, Button,Input,Form,Modal,Row,Col } from 'antd';

import Axios from "../../util/axios";
export default function Inventorystatistics()  {
    const columns = [
        {
            title: '行号',
            dataIndex: 'Id',
            key: 'id',
        },
        {
            title: '总部/门店名称',
            dataIndex: 'WarehousingStore',
            key: 'warehousingStore',
        },
        {
            title: '类库/柜台',
            dataIndex: 'Warehousing',
            key: 'warehousing',
        },
        {
            title: '首饰编码',
            dataIndex: 'CommodityNum',
            key: 'commoditynum',
        },
        {
            title: '首饰名称',
            dataIndex: 'CommodityName',
            key: 'commodityname',
        },
        {
            title: '成色',
            dataIndex: 'Condit',
            key: 'condit',
        },
        {
            title: '数量',
            dataIndex: 'Quantity',
            key: 'quantity',
        },
        {
            title: '重量',
            dataIndex: 'Weight',
            key: 'weight',
        },
        {
            title: '成本单价',
            dataIndex: 'Cost',
            key: 'cost',
        },
        {
            title: '总成本',
            dataIndex: 'Costs',
            key: 'costs',
        },
        {
            title: '操作',
            align: 'center ',
            key: 'action ',
            render: (row) =>(
                <div>
                    <Button onClick={()=>onmore(row)}>查看详情</Button>
                </div>
            ),
        },
    ];
    const { Search } = Input;
//表格数据
    const [data, setData] = useState();
    const [chaxun,setchaxun] = useState();
    const [more,setmore] = useState();
    const [form] = Form.useForm();
    const [moreform] = Form.useForm();

    const onSearch = () => {
        setchaxun(true);
    };

    const handleOk = () => {
        form.getFieldsValue({
            WarehousingStore:form.WarehousingStore,
            CommodityNum:form.CommodityNum,
        })
        let data=form.getFieldsValue()
        Axios.post('/kucuntongji/chaxun',data).then((res)=>{
            console.log(res)
            const result = res.data;
            console.log(result)
            let arr = []
            if (result.code === 200) {
                let data = result.data
                data.forEach(item => {
                    let itemData = {key: item.id, ...item}
                    arr.push(itemData)
                })
            }
            setData(arr)
                // if(res){
                //     let arr= res.data.data.map((item,key)=>{
                //         return {key: key,
                //             Id:key+1,
                //             WarehousingStore:item.WarehousingStore,
                //             Warehousing:item.Warehousing,
                //             CommodityNum:item.CommodityNum,
                //             CommodityName:item.CommodityName,
                //             Condit:item.Condit,
                //             Quantity:item.Quantity,
                //             Weight:item.Weight,
                //             Cost:item.Cost,
                //             Costs:item.Costs,
                //         }
                //     })
                //     setData(arr)
                // }
            }
        )
        setchaxun(false);
    };

    const handleCancel = () => {
        setchaxun(false);
    };
    //查看
    const onmore = (row) => {
        moreform.setFieldsValue({
            WarehousingStore:row.WarehousingStore,
            Warehousing:row.Warehousing,
            CommodityNum:row.CommodityNum,
            CommodityName:row.CommodityName,
            Condit:row.Condit,
            Weight:row.Weight,
            Quantity:row.Quantity,
            Cost:row.Cost,
            Costs:row.Costs,
        })
        setmore(true);
    };
    const moreOk = () => {
        setmore(false);
    };

    const moreCancel = () => {
        setmore(false);
    };

    //获取内容
    function XianShi(){
        Axios.get('/kucuntongji/xianshi',[]).then((res)=>{
            if(res){
                let arr= res.data.data.map((item,key)=>{
                    return {key: key,
                        Id:key+1,
                        WarehousingStore:item.WarehousingStore,
                        Warehousing:item.Warehousing,
                        CommodityNum:item.CommodityNum,
                        CommodityName:item.CommodityName,
                        Condit:item.Condit,
                        Quantity:item.Quantity,
                        Weight:item.Weight,
                        Cost:item.Cost,
                        Costs:item.Costs,
                    }
                })
                setData(arr)
            }
        })
    }
    useEffect(()=>{
            XianShi();
        },[]
    )
    return (
        <div>
            <div>库存统计</div>
            <hr/>
            <div>
                <Button shape="round" onClick={()=>onSearch()}>
                    查询更多
                </Button>
            </div>
            <Table
                rowSelection={{
                    type: 'checkbox'
                }}
                columns={columns}
                dataSource={data}
                pagination={{pageSize: 4}}
                scroll={{y: 240}}/>
            <Modal title="Basic Modal" visible={chaxun} onOk={handleOk} onCancel={handleCancel}
            okText='查询' cancelText='取消'>
                <Form
                form={form}
                name="basic"
                labelCol={{span: 8,}}
                wrapperCol={{span: 16,}}
                // onFinish={Edit}
                autoComplete="off">
                <Row>
                    <Col span={12}>
                        <Form.Item label="门店名称" name="WarehousingStore">
                            <Input allowClear/>
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item label="首饰编码" name="CommodityNum">
                            <Input allowClear/>
                        </Form.Item>
                    </Col>
                </Row>
                </Form>
            </Modal>

            {/*查看详情模态框*/}
            <Modal title="Basic Modal" visible={more} onOk={moreOk} onCancel={moreCancel}
                   okText='确定' cancelText='取消'>
                <Form
                    form={moreform}
                    name="basic"
                    labelCol={{span: 8,}}
                    wrapperCol={{span: 16,}}
                    // onFinish={Edit}
                    autoComplete="off">
                    <Row>
                        <Col span={12}>
                            <Form.Item label="门店名称" name="WarehousingStore">
                                <Input disabled="disabled"/>
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item label="台柜名称" name="Warehousing">
                                <Input disabled="disabled"/>
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item label="首饰编码" name="CommodityNum">
                                <Input disabled="disabled"/>
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item label="首饰名称" name="CommodityName">
                                <Input disabled="disabled"/>
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item label="成色" name="Condit">
                                <Input disabled="disabled"/>
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item label="重量" name="Weight">
                                <Input disabled="disabled"/>
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item label="数量" name="Quantity">
                                <Input disabled="disabled"/>
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item label="成本单价" name="Cost">
                                <Input disabled="disabled"/>
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item label="总成本" name="Costs">
                                <Input disabled="disabled"/>
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
            </Modal>

        </div>
    );
}
